var autoCompleteCombo = new AutoCompleteCombo();

function AutoCompleteCombo(){
	
}

/*	
  	Esse componente altera o comportamento default do "select" do widget, que é colocar o que foi clicado no campo
	de input, mudamos para trocar apenas quando for diferente de 0, que seria o "selecione".
		
	A validação para combo inválido sempre deve comparar se o value do combo é nulo, pois o default do autocomplete
	quando o campo digitado ficou inválido é settar null no combo.
	
	**IMPORTANTE** o widget de combobox foi modificado:
	*Quando cria um input, agora gera com o id do combo+"Input".
	*
	*Agora as mensagens que ele exibia, aparecem atraves de um config "msgs" que deve ser uma variavel global com as seguintes
	*chaves do exemplo de properties abaixo:
	*combo_mostrar_itens Mostrar Tudo
	*combo_erro_nao_contem &nbcp;não existe na lista
	*
	**Atenção ao mudar de versão.**
	
 */

/**
 * 
 * @param seletor (Seletor do campo de combo.)
 * 
 * @param config (Parâmetro que chama os atributos do combobox)
 * 
 * 		<ul>
 * 		<li><p>
 * 		<b>AppendTo:</b>
		Tipo: Selector;
		Default : null;
		Se o elemento for nulo, o campo de texto recebe a classe 'ui-front', quando um elemento com essa classe é encontrada, o valor é encontrado no 'banco' 
		e é mostrado logo abaixo do campo de texto.
		</li></p>
		</ul>
		
		<ul>
		<li><p>
		<b>AutoFocus:</b>
		Tipo: boolean;
		Default: false;
		Quando setado o valor "true", o primeiro elemento do campo 'autocomplete' é selecionado no 'autocomplete'.
		</li></p>
		</ul>
		
		<ul>
		<li><p>
		<b>Delay:</b>
		Tipo: Integer;
		Default: 300;
		Quando o usuario digita qualquer informação no campo de texto, é programado um tempo em milisegundos para ser buscado as informações que serão mostradas no
		autocomplete, quando o valor do Delay é '0', é porque as informações que estão no autocomplete estão guardadas na máquina do usuário, quanto maior o valor,
		maior o tempo que ele necessita para buscar as informações no banco (quanto mais informações tem no banco, mais tempo ele precisa).
		</li></p>
		</ul>
		
		<ul>
		<li><p>
		<b>Disabled:</b>
		Tipo: boolean;
		Default: false;
		Desabilita o autocomplete quando setado true. ---
		</li></p>
		</ul>
		
		<ul>
		<li><p>
		<b>MinLength:</b>
		Tipo: Integer;
		Default: 1;
		O valor do minLength determina quantos caracteres serão necessário no minimo para que a pesquisa seja realizada no banco. Ex: com o valor 2,
		a pessoa precisa digitar "Ab" para que o nome "Abner" seja mostrado no autocomplete.
		</li></p>
		</ul>
		
		<ul>
		<li><p>
		<b>Position:</b>
		Tipo: Object;
		Default: { my: "left top", at: "left bottom", collision: "none" };
		Define qual posição será mostrada o autocomplete, a opção "my" tem o default "center" e define a posição que será mostrada os elementos dentro do autocomplete;
		a opção "at" tem o default "center" e define como sera a ordem que serão mostrados os elementos do autocomplete; a opção "of" tem o default "null" e define
		quais os elementos você vai posicionar contra; a opção "collision" tem o default "flip" e define qual o tipo do 'evento' sera mostrado quando o autocomplete
		for ativado, são 4 opções: flip - fit - flipfit - none.
		</li></p>
		</ul>
		
 	@param placeholder: é possível enviar uma String com uma sugestão para aparecer no campo.
 	
 */
AutoCompleteCombo.prototype.autoCompleteCombo = function(seletor,config,placeholder){
		
	//se o seletor não foi enviado, não tem como saber para que campo é
	if(!seletor){
		
		return false;
	}	
	
	var seletorAnterior = $(seletor).val();
	var seletorInput = seletor+"Input";
	
	//dados que serão enviados por default
	var dadosEnviar = {
			
		"select": function(evento, ui) {
			
			if(ui.item.value == 0){ //se o item for o invalido
				evento.preventDefault(); //não deixa ele ser colocado no campo de input
			}
			
			$(seletorInput).val(ui.item.text);//o que foi selecionado é colocado como valor no campo de input
			$(seletorInput).trigger("blur");//o foco é tirado para fazer a validação e ativar o change event
		}
					
	};
	
	//os dados que o usuario passou no config, serão colocados no que será enviado, sobrescrevendo o default
	$.extend(dadosEnviar,config);
	
	//o componente é chamado, enviando os dados
	$(seletor).combobox(dadosEnviar);
	
	//após o widget ter criado o campo de input:
	
	//se o usuario deseja adicionar o placeholder ao campo de input
	if(placeholder){
	
		//adicionado um placeholder com o valor que foi passado ao campo de input
		$(seletorInput).attr("placeholder", placeholder); 
		//valor do input mudado para vazio, pois é colocado o valor do que vem selecionado no combo,
		//então não apareceria o placeholder
		$(seletorInput).val("");
	}
	
	//verifica o valor que estava no combo quando o input ganhou foco
	$(seletorInput).on("focus",function(){
		
		seletorAnterior = $(seletor).val();
		
		$(this).hover(
			function() {},
			function() {
				
				function wheel(){
					$(this).hide();
				};
				
				window.addEventListener('DOMMouseScroll', wheel, false);
				
			}
		);
				
	});
	
	//quando ele perde o foco é verificado se o valor mudou
	$(seletorInput).on("blur",function(){
				
		//se o valor mudou para o campo inválido, o campo de input é limpado para aparecer o placeholder
		if($(seletor).val() == 0 || $(seletor).val() == ""){
			$(this).val("");
		}
		
		//se mudou o valor, o evento de change é chamado
		if($(seletor).val() != seletorAnterior){
			
			$(seletor).trigger("change");
		}
		
				
	});
	
};